// flex布局 ********************************************
.flex {
  display: flex;
}
.flex-column {
  display: flex;
  flex-direction: column;
}
.flex-wrap {
  display: flex;
  flex-wrap: wrap; // 子元素换行
}
// .flex-1{flex:1}
@for $i from 1 through 6 {
  .flex-#{$i} {
    flex: #{$i};
  }
}
// 设置主轴方向 x y
$direction: (
  // 从左到右（默认值）
  'r': row,
  // 从右到左
  'rr': row-reverse,
  // 从上到下
  'c': column,
  // 从下到上
  'cr': column-reverse
);
// 主轴上子元素排列方式
$justify: (
  // 从头部开始，如果主轴是x轴，则从左到右（默认值）
  'start': flex-start,
  // 在主轴居中对齐(如果主轴是 x 轴则水平居中)
  'center': center,
  // 从尾部开始排列
  'end': flex-end,
  // 先两边贴边，再平分剩余空间☆☆☆
  'between': space-between,
  // 平分剩余空间
  'around': space-around
);
// 侧轴上子元素排列方式
$align: (
  // 从上到下
  'start': flex-start,
  // 挤在一起居中(垂直居中)
  'center': center,
  // 从下到上
  'end': flex-end,
  // 拉伸(默认值)
  'stretch': stretch
);

@each $alignKey, $alignVal in $align {
  @each $justifyKey, $justifyVal in $justify {
    // flex-start-center
    .flex-#{$justifyKey}-#{$alignKey} {
      display: flex;
      justify-content: #{$justifyVal};
      align-items: #{$alignVal};
    }
    @each $directionKey, $directionVal in $direction {
      // flex-r-start-center
      .flex-#{$directionKey}-#{$justifyKey}-#{$alignKey} {
        display: flex;
        flex-direction: #{$directionVal};
        justify-content: #{$justifyVal};
        align-items: #{$alignVal};
      }
    }
  }
}
